<template>
  <view class="container">
    <view class="head">
      <view style="padding: 20rpx">
        <view class="return">
          <uni-icons type="left" color="white" size="30" @click="goBack" />
        </view>
        <view class="title">{{ title }} </view>
      </view>
    </view>

    <view class="body">
        <view class="card">
            <view v-if="orderList.length === 0" class="empty-tip">
                暂无消费记录
            </view>
            <view class="wxitem" v-for="item in orderList" :key="item.id">
                <view class="left">
                    <view>{{item.shopName + '-' + item.serviceName}}</view>
                    <view>{{formatDate(item.order.payTime)}}</view>
                </view>
                <view class="right">
                    -{{item.order.price}}元
                </view>
            </view>
        </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 响应式状态
const title = ref("消费记录")
const orderList = ref([])
const id = ref(null)

// 获取用户订单列表
const fetchUserOrders = async (userId) => {
    try {
        const res = await uni.request({
            url: `http://localhost:9401/orders/byUserId/${userId}`,
            method: 'GET',
            header: {
                'Authorization': uni.getStorageSync('Token')
            }
        })

        if (res.data.code === 200 && res.data.rows) {
			console.log('api',res)
            orderList.value = res.data.rows; 
        } else {
            uni.showToast({
                title: res.data.msg || '获取订单列表失败',
                icon: 'none'
            });
        }
    } catch (error) {
        console.error('网络请求或处理失败:', error);
        uni.showToast({
            title: '网络请求失败',
            icon: 'none'
        });
    }
}

// 格式化日期
const formatDate = (dateStr) => {
    if (!dateStr) return ''
    const date = new Date(dateStr)
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    const hours = String(date.getHours()).padStart(2, '0')
    const minutes = String(date.getMinutes()).padStart(2, '0')
    return `${year}.${month}.${day} ${hours}:${minutes}`
}

// 页面加载
onLoad((options) => {
    if (!options.id) {
        uni.showToast({
            title: '参数不完整',
            icon: 'none'
        })
        setTimeout(() => {
            goBack()
        }, 1500)
        return
    }

    // 使用传入的用户ID
    id.value = options.id
    fetchUserOrders(options.id)
})

// 返回上一页
const goBack = () => {
    uni.navigateBack({ delta: 1 })
}
</script>

<style lang="scss" scoped>
@import "@/static/qkp1.css";

.wxitem{
    display: flex;
    justify-content: space-between;
    padding: 35rpx 30rpx;
    align-items: center;
}

.wxitem .left{
    
}

.wxitem .left view:nth-child(1){
    font-size: 29rpx;
    font-weight: 600;
    margin-bottom: 24rpx;
}

.wxitem .left view:nth-child(2){
    font-size: 27rpx;
    opacity: 0.7;
}

.right {
    color: #FF5252;
    font-size: 29rpx;
    font-weight: 500;
}

.empty-tip {
    text-align: center;
    padding: 40rpx 0;
    color: #999;
    font-size: 28rpx;
}
</style>
